<template>
  <!-- 使用 v - if 指令，当 currentDevice 存在时，才渲染该 div 元素，用于展示当前设备信息 -->
  <div class="current-device-display" v-if="currentDevice">
    <!-- 设备信息容器，用于包含设备的图标、名称、状态标签和类型等信息 -->
    <div class="device-info">
      <!-- 设备图标，使用 element - plus 的 Monitor 图标 -->
      <el-icon><Monitor /></el-icon>
      <!-- 设备名称，绑定 currentDevice 对象中的 equipment_name 属性来显示设备名称 -->
      <span class="device-name">{{ currentDevice.equipment_name }}</span>
      <!-- 设备状态标签，根据 currentDevice 的 onlineStatus 属性值来设置标签类型（成功或危险），并显示对应的连接状态 -->
      <el-tag 
        size="small" 
        :type="currentDevice.onlineStatus === '上线' || currentDevice.onlineStatus === '在线' ? 'success' : 'danger'"
        class="status-tag"
      >
        {{ currentDevice.onlineStatus === '上线' || currentDevice.onlineStatus === '在线' ? '已连接' : '未连接' }}
      </el-tag>
      <!-- 设备类型，绑定 currentDevice 对象中的 equipment_type 属性来显示设备类型 -->
      <span class="device-type">{{ currentDevice.equipment_type }}</span>
    </div>
  </div>
</template>

<script setup>
// 从 '../stores/deviceStore' 中导入 useDeviceStore 函数，用于获取设备相关的 store 实例
import { useDeviceStore } from '../stores/deviceStore'
// 从 pinia 中导入 storeToRefs 函数，用于将 store 中的响应式数据转换为独立的响应式引用
import { storeToRefs } from 'pinia'
// 导入 element - plus 的 Monitor 图标组件
import { Monitor } from '@element-plus/icons-vue'
// 导入 Vue 的 watch 函数，用于监听数据变化
import { watch } from 'vue'
// 导入 element - plus 的 ElMessage 组件，用于显示提示信息
import { ElMessage } from 'element-plus'

// 获取设备 store 实例
const deviceStore = useDeviceStore()
// 将 deviceStore 中的 currentDevice 数据转换为独立的响应式引用
const { currentDevice } = storeToRefs(deviceStore)

// 定义变量 lastDeviceId，初始值为当前 currentDevice 的 id（如果存在），用于记录上一次的设备 id
let lastDeviceId = currentDevice.value?.id

// 监听 currentDevice.value 的变化
watch(() => currentDevice.value, (newDevice) => {
  // 如果新设备存在且其 id 与上一次的设备 id 不同
  if (newDevice && newDevice.id !== lastDeviceId) {
    // 更新 lastDeviceId 为新设备的 id
    lastDeviceId = newDevice.id
    // 显示提示信息，提示已切换到新设备
    ElMessage.success(`已切换到设备：${newDevice.equipment_name}`)
  }
}, { deep: true })
</script>

<style scoped>
/* 用于显示当前设备信息的容器样式，设置为弹性布局，水平右外边距为 20px */
.current-device-display {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

/* 设备信息内部容器样式，设置为弹性布局，元素间距为 8px，字体大小为 14px，文本颜色为 --el-text-color-regular */
.device-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--el-text-color-regular);
}

/* 设备名称样式，设置字体粗细为 500，文本颜色为 --el-text-color-primary */
.device-name {
  font-weight: 500;
  color: var(--el-text-color-primary);
}

/* 设备类型样式，设置文本颜色为 --el-text-color-secondary，字体大小为 13px */
.device-type {
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

/* 设备状态标签样式，缩放比例为 0.9，缩放原点为中心 */
.status-tag {
  transform: scale(0.9);
  transform-origin: center;
}

/* 当屏幕宽度小于等于 768px 时的响应式样式 */
@media (max-width: 768px) {
  /* 用于显示当前设备信息的容器样式，水平右外边距调整为 12px */
 .current-device-display {
    margin-right: 12px;
  }

  /* 设备信息内部容器样式，元素间距调整为 6px */
 .device-info {
    gap: 6px;
  }

  /* 设备类型样式，设置为不显示 */
 .device-type {
    display: none;
  }
}
</style>